/**
 *  @file       reset.css
 *  @brief      reset css styles
 *
 *
 *  @author     liumoran@outlook.com
 *  @version    1.1
 *  @date       2019
*/

/* define color */

$blue: #2c8ef8;
$indigo: #727cf5;
$purple: #6b5eae;
$pink: #ff679b;
$red: #fa5c7c;
$orange: #fd7e14;
$yellow: #ffbc00;
$green: #0acf97;
$teal: #02a8b5;
$cyan: #39afd1;
$white: #fff;
$gray: #98a6ad;
$gray-dark: #343a40;
$primary: #727cf5;
$secondary: #6c757d;
$success: #0acf97;
$info: #39afd1;
$warning: #ffbc00;
$danger: #fa5c7c;
$light: #e3eaef;
$dark: #313a46;

/* reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    font-family: Arial, "Microsoft YaHei", "Microsoft YaHei UI", "微软雅黑", Helvetica, Tahoma, STXihei, "华文细黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
}

html, body{
    height: 100%;
}
html{

    a {
        text-decoration: none;
        color: black;
        outline: none;
    }
    
    em {
        font-style: normal;
    }
    
    li {
        list-style: none;
    }
    
    input, button ,textarea {
        border: 0;
        outline: none;
        background-color: rgba(0, 0, 0, 0);
        font-size: 16px;
    }
    
    input::-webkit-input-placeholder {
        color: #9e9e9e;
        font-size: 12px;
        text-align: left;
    }
    
    textarea {
        resize: none;
    }
}

body{
    padding: 15px;
    font-size: 12px;
}

/* float */
.fl{
    float: left;
}
.fr{
    float: right;
}
.clear{
    clear: both;
}
.clearfix:after{
    content: "";
    display: block;
    clear: both;
}

/* widget */

.button{
    box-sizing: border-box;
    cursor: pointer;
    background-color: $cyan;
    color: white;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 16px;
    line-height: 20px;
    margin: 7px 3px 7px 3px;
    &:hover{
        background-color: rgba($color: transparent, $alpha: 0.3);
    }
}

.input_text, .input_search{
    padding-left: 7px;
    width: 130px;
    height: 40px;
    margin-bottom: 7px;
    border: 1px solid #6b6b6b;
    border-radius: 5px;
}



/* table */
table{
    border-spacing: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    thead{
        background-color: $gray;
        tr{
            height: 50px;
            // background-color: white;
            th{
                width: 100px;
                color: white;
                font-size: 16px;
                font-weight: normal;
                user-select: none;
            }
        }
    }
    tbody{
        tr{
            height: 40px;
            td{
                text-align: center;
                border-top: 1px solid black;
            }
        }
    }
}
/* mac_box */
.mac_box{
    // margin: 5px 10px 7px 10px;
    position: absolute;
    right: 0;
    left: 0;
    margin: 10px auto;
    width: 600px;
    height: 350px;
    overflow: hidden;
    border-radius: 10px;
    /* to be delete */
    background-color: #ececec;
    box-shadow: 1px 1px 7px 1px;
    .mac_title{
        width: inherit;
        height: 38px;
        padding: 5px 9px;
        background-color: #dbdbdb;
        border-bottom: 1px solid #a7a7a8;
        font-size: 0;

        .btn_area{
            padding-top: 8px;
            padding-bottom: 8px;
            .btn_round{
                width: 12px;
                height: 12px;
                border-radius: 50%;
                border: 1px solid black;
                display: inline-block;
                margin-left: 4px;
                margin-right: 4px;
                cursor: pointer;
            }
            .btn_close{
                border-color: #ef4b47;
                background-color: #fc625d;
            }
            .btn_max{
                border-color: #dfa137;
                background-color: #fdbd41;
            }
            .btn_min{
                border-color: #b0b0b0;
                background-color: #d1d1d1;
            }
        }
    }
    .mac_body{
        width: 100%;
        height: 100%;
        background-color: #fff;
        font-size: 20px;
        text-align: center;
    }
}

/* btn_circle */
.btn_circle{
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid black;
    background-color: #fff;
}

.gil-red{
    border-color: #fc4741;
    background-color: #fc6b67;
}
.gil-orange{
    border-color: #fd9e2b;
    background-color: #fdb155;
}
.gil-yellow{
    border-color: #fed533;
    background-color: #fedd5b;
}
.gil-green{
    border-color: #3dd553;
    background-color: #63dd75;
}
.gil-blue{
    border-color: #499ffb;
    background-color: #1c85f8;

    &:hover{
        background-color: #499ffb;
    }
}
.gil-gray{
    border-color: #98989d;
    background-color: #acacb0;
}
.gil-purple{
    border-color: #be60ef;
    background-color: #cb7ff2;
}